<template>
  <uni-popup ref="popup" type="center">
    <view class="package" style="width: 725rpx;">
      <view class="package" style="text-align: center;padding-top:0px">当前车牌：{{ car }}</view>
      <view class="space-between list" v-for="(item, index) in friendList" :key="index">
        <view class="direction-start" style="width:83%">
          <view class="space-between" style="width:100%">
            <view>
              <text>{{ item.real_name ? item.real_name : '车友' }}</text>
              <text v-if="item.mobile"> . {{ item.mobile ? item.mobile : '手机号码' }}</text>
            </view>
            <view class="park">{{ item.park }}</view>
          </view>
          <view class="space-between" style="width:100%;margin-top:5rpx;">
            <text>{{ item.plug_name }}</text>
            <text>{{ item.time }}</text>
          </view>
        </view>
        <view class="but" @click="navTo('Sale/archives/editFriend?id=' + item.id + '&userID=' + item.driver_id)">
          查看
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
import { toPublish } from '@/mqtt/main';
import { getArchivesList } from '@/gql/archives';
import { ref } from 'vue';
const friendList = ref([]);
const popup = ref(null);
const car = ref('');
function init(num) {
  car.value = num;
  const payload = {
    query: getArchivesList,
    variables: {
      plug_id: 0,
      page: 1,
      park_id: 0,
      order: 'createtime desc',
      keywords_type: 'cart_code',
      keywords: num,
    },
  };
  toPublish('ql/plug/getArchivesList', payload, (obj: any) => {
    const { getArchivesList } = obj.data;
    friendList.value = getArchivesList.list;
    if (friendList.value.length > 0) {
      popup.value.open();
    }
  });
}
defineExpose({
  init,
});
</script>

<style scoped lang="less">
.list:nth-last-child(1) {
  margin-bottom: 0px;
  border-bottom: 0px;
}
.list {
  width: 100%;
  padding-bottom: 10rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.but {
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #1b91ff;
  color: #fff;
}
.park {
  width: 45%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
